<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - SSE-CodeMaster 在线编程刷题平台</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 其他头部内容（如标题、CSS 引入） -->
    <!-- 指定 favicon 路径 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        success: '#52C41A',
                        danger: '#FF4D4F',
                        warning: '#FAAD14'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
            }
            .password-strength-bar {
                height: 4px;
                transition: width 0.3s ease;
            }
        }
    </style>

    <style>
        /* 全局样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #F7F8FA;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        .input-focus-effect {
            position: relative;
        }

        .input-focus-effect::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #165DFF;
            transition: width 0.3s ease;
        }

        .input-focus-effect:focus-within::after {
            width: 100%;
        }

        /* 密码可见性切换动画 */
        .toggle-icon {
            transition: transform 0.3s ease;
        }

        .toggle-icon.active {
            transform: rotate(180deg);
        }

        /* 加载动画 */
        .loader {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 验证码按钮加载动画 */
        .code-loader {
            width: 14px;
            height: 14px;
            border: 2px solid rgba(255,255,255,0.5);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        /* 消息提示动画 */
        .message {
            transform: translateY(-10px);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .message.show {
            transform: translateY(0);
            opacity: 1;
        }

        /* 条款勾选动画 */
        .checkbox-custom:checked + label::after {
            transform: scale(1);
        }

        .checkbox-custom + label::after {
            content: '\f00c';
            font-family: 'FontAwesome';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.2s ease;
            color: white;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <!-- 注册容器 -->
    <div class="w-full max-w-6xl grid md:grid-cols-2 gap-8 shadow-2xl rounded-2xl overflow-hidden bg-white">
        <!-- 左侧品牌展示区 -->
        <div class="hidden md:flex flex-col justify-between bg-gradient-primary p-12 text-white relative overflow-hidden">
            <!-- 背景装饰 -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-white"></div>
                <div class="absolute bottom-20 right-10 w-60 h-60 rounded-full bg-white"></div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full bg-white"></div>
            </div>

            <!-- 品牌信息 -->
            <div class="relative z-10 animate-fade-in" style="animation-delay: 0.1s">
                <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4 text-shadow">SSE-CodeMaster</h1>
                <p class="text-lg opacity-90 max-w-md">提升你的编程技能，挑战来自全球的编程题目，成为真正的代码大师。</p>
            </div>

            <!-- 注册福利 -->
            <div class="relative z-10 space-y-6 mt-12 animate-fade-in" style="animation-delay: 0.3s">
                <div class="flex items-start gap-4">
                    <div class="bg-white/20 p-3 rounded-lg">
                        <i class="fa fa-gift text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">全程免费</h3>
                        <p class="opacity-80">所有题目都是免费的，你可以在任何时候、任何地点挑战我们的题目。</p>
                    </div>
                </div>

                <div class="flex items-start gap-4">
                    <div class="bg-white/20 p-3 rounded-lg">
                        <i class="fa fa-users text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">题目丰富</h3>
                        <p class="opacity-80">参与编程竞赛，与全院同窗友好竞技</p>
                    </div>
                </div>
            </div>


        </div>

        <!-- 右侧注册表单区 -->
        <div class="flex flex-col p-8 md:p-12 animate-fade-in">
            <!-- 移动端品牌信息 -->
            <div class="md:hidden mb-8">
                <h1 class="text-3xl font-bold text-dark mb-2">SSE-CodeMaster</h1>
                <p class="text-gray-500">提升编程技能，挑战全球题目</p>
            </div>

            <!-- 注册标题 -->
            <div class="mb-8">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">SSE-CodeMaster</h2>
                <p class="text-gray-500 mt-1">加入我们，开启你的编程提升之旅</p>
            </div>

            <!-- 消息提示 -->
            <div id="successMessage" class="message bg-success/10 border border-success/20 text-success text-sm p-3 rounded-lg mb-4 hidden">
                <i class="fa fa-check-circle mr-2"></i>
                <span id="successText">注册成功，正在跳转...</span>
            </div>

            <div id="errorMessage" class="message bg-danger/10 border border-danger/20 text-danger text-sm p-3 rounded-lg mb-4 hidden">
                <i class="fa fa-exclamation-circle mr-2"></i>
                <span id="errorText">注册失败，请检查输入信息</span>
            </div>

            <!-- 注册表单 -->
            <form id="registerForm" class="space-y-6 flex-grow">
                <!-- 用户名输入 -->
                <div class="space-y-2 input-focus-effect">
                    <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <input
                            type="text"
                            id="username"
                            name="username"
                            required
                            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-custom"
                            placeholder="请设置用户名"
                            minlength="3"
                            maxlength="20"
                        >
                        <span class="absolute inset-y-0 right-0 flex items-center pr-3 hidden" id="usernameValid">
                            <i class="fa fa-check-circle text-success"></i>
                        </span>
                        <span class="absolute inset-y-0 right-0 flex items-center pr-3 hidden" id="usernameInvalid">
                            <i class="fa fa-times-circle text-danger"></i>
                        </span>
                    </div>
                    <p class="text-xs text-gray-500" id="usernameHint">3-20个字符</p>
                </div>

                <!-- 邮箱输入 -->
                <div class="space-y-2 input-focus-effect">
                    <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-envelope"></i>
                        </span>
                        <input
                            type="email"
                            id="email"
                            name="email"
                            required
                            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-custom"
                            placeholder="请输入邮箱地址"
                        >
                        <span class="absolute inset-y-0 right-0 flex items-center pr-3 hidden" id="emailValid">
                            <i class="fa fa-check-circle text-success"></i>
                        </span>
                        <span class="absolute inset-y-0 right-0 flex items-center pr-3 hidden" id="emailInvalid">
                            <i class="fa fa-times-circle text-danger"></i>
                        </span>
                    </div>
                    <p class="text-xs text-gray-500">请输入有效的邮箱地址，用于接收验证码</p>
                </div>

                <!-- 验证码输入 -->
                <div class="space-y-2 input-focus-effect">
                    <label for="verificationCode" class="block text-sm font-medium text-gray-700">验证码</label>
                    <div class="relative flex gap-3">
                        <div class="relative flex-1">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-shield"></i>
                            </span>
                            <input
                                type="text"
                                id="verificationCode"
                                name="verificationCode"
                                required
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-custom"
                                placeholder="请输入验证码"
                                minlength="6"
                                maxlength="6"
                            >
                        </div>
                        <button
                            type="button"
                            id="sendCodeBtn"
                            class="whitespace-nowrap px-4 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-custom flex items-center justify-center gap-2 min-w-[120px]"
                        >
                            <span id="codeBtnText">发送验证码</span>
                            <div class="code-loader" id="codeLoader" style="display: none;"></div>
                        </button>
                    </div>
                    <p class="text-xs text-gray-500" id="codeHint">验证码将发送至您的邮箱，有效期5分钟</p>
                </div>

                <!-- 密码输入 -->
                <div class="space-y-2 input-focus-effect">
                    <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input
                            type="password"
                            id="password"
                            name="password"
                            required
                            class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-custom"
                            placeholder="请设置密码"
                            minlength="8"
                        >
                        <button
                            type="button"
                            id="togglePassword"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-custom"
                        >
                            <i class="fa fa-eye toggle-icon"></i>
                        </button>
                    </div>

                    <!-- 密码强度指示器 -->
                    <div class="mt-2">
                        <div class="flex gap-1 mb-1">
                            <div id="strength1" class="password-strength-bar w-1/4 rounded-full bg-gray-200"></div>
                            <div id="strength2" class="password-strength-bar w-1/4 rounded-full bg-gray-200"></div>
                            <div id="strength3" class="password-strength-bar w-1/4 rounded-full bg-gray-200"></div>
                            <div id="strength4" class="password-strength-bar w-1/4 rounded-full bg-gray-200"></div>
                        </div>
                        <p class="text-xs text-gray-500" id="passwordStrengthText">密码强度：未输入</p>
                    </div>
                    <p class="text-xs text-gray-500">至少8个字符，包含字母和数字</p>
                </div>

                <!-- 确认密码 -->
                <div class="space-y-2 input-focus-effect">
                    <label for="confirmPassword" class="block text-sm font-medium text-gray-700">确认密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input
                            type="password"
                            id="confirmPassword"
                            name="confirmPassword"
                            required
                            class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-custom"
                            placeholder="请再次输入密码"
                        >
                        <button
                            type="button"
                            id="toggleConfirmPassword"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-custom"
                        >
                            <i class="fa fa-eye toggle-icon"></i>
                        </button>
                        <span class="absolute inset-y-0 right-6 flex items-center pr-3 hidden" id="passwordMatch">
                            <i class="fa fa-check-circle text-success"></i>
                        </span>
                        <span class="absolute inset-y-0 right-6 flex items-center pr-3 hidden" id="passwordMismatch">
                            <i class="fa fa-times-circle text-danger"></i>
                        </span>
                    </div>
                </div>

                <!-- 同意条款 -->
                <div class="pt-2">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input
                                id="terms"
                                name="terms"
                                type="checkbox"
                                required
                                class="checkbox-custom w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary/50"
                            >
                        </div>
                        <label for="terms" class="ml-3 text-sm text-gray-600 relative cursor-pointer">
                            我已阅读并同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
                        </label>
                    </div>
                </div>

                <!-- 注册按钮 -->
                <button
                    type="submit"
                    id="registerButton"
                    class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center gap-2 shadow-lg shadow-primary/20 hover:shadow-primary/30 transform hover:-translate-y-0.5 active:translate-y-0 mt-4"
                >
                    <span id="registerText">注册账号</span>
                    <i class="fa fa-user-plus" id="registerIcon"></i>
                    <div class="loader" id="registerLoader" style="display: none;"></div>
                </button>

            <!-- 登录提示 -->
            <div class="mt-8 text-center">
                <p class="text-gray-600">
                    已有账号?
                    <a href="/login" class="font-medium text-primary hover:text-primary/80 transition-custom">立即登录</a>
                </p>
            </div>
            </form>
        </div>
    </div>

    <!-- 交互脚本 -->
    <script>
        // 密码可见性切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        const eyeIcon = togglePassword.querySelector('i');

        togglePassword.addEventListener('click', () => {
            // 切换密码可见性
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // 切换图标
            eyeIcon.classList.toggle('fa-eye');
            eyeIcon.classList.toggle('fa-eye-slash');
            eyeIcon.classList.toggle('active');
        });

        // 确认密码可见性切换
        const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
        const confirmPasswordInput = document.getElementById('confirmPassword');
        const confirmEyeIcon = toggleConfirmPassword.querySelector('i');

        toggleConfirmPassword.addEventListener('click', () => {
            // 切换密码可见性
            const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            confirmPasswordInput.setAttribute('type', type);

            // 切换图标
            confirmEyeIcon.classList.toggle('fa-eye');
            confirmEyeIcon.classList.toggle('fa-eye-slash');
            confirmEyeIcon.classList.toggle('active');
        });

        // 表单元素
        const registerForm = document.getElementById('registerForm');
        const registerButton = document.getElementById('registerButton');
        const registerText = document.getElementById('registerText');
        const registerIcon = document.getElementById('registerIcon');
        const registerLoader = document.getElementById('registerLoader');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');
        const successText = document.getElementById('successText');
        const errorText = document.getElementById('errorText');

        // 验证码相关元素
        const sendCodeBtn = document.getElementById('sendCodeBtn');
        const codeBtnText = document.getElementById('codeBtnText');
        const codeLoader = document.getElementById('codeLoader');
        const codeHint = document.getElementById('codeHint');
        const verificationCodeInput = document.getElementById('verificationCode');

        // 用户名验证
        const usernameInput = document.getElementById('username');
        const usernameValid = document.getElementById('usernameValid');
        const usernameInvalid = document.getElementById('usernameInvalid');
        const usernameHint = document.getElementById('usernameHint');

        // 邮箱验证
        const emailInput = document.getElementById('email');
        const emailValid = document.getElementById('emailValid');
        const emailInvalid = document.getElementById('emailInvalid');

        // 密码强度
        const passwordStrengthText = document.getElementById('passwordStrengthText');
        const strength1 = document.getElementById('strength1');
        const strength2 = document.getElementById('strength2');
        const strength3 = document.getElementById('strength3');
        const strength4 = document.getElementById('strength4');

        // 密码匹配验证
        const passwordMatch = document.getElementById('passwordMatch');
        const passwordMismatch = document.getElementById('passwordMismatch');

        // 显示消息
        function showMessage(element, message) {
            element.querySelector('span').textContent = message;
            element.classList.remove('hidden');
            setTimeout(() => {
                element.classList.add('show');
            }, 10);
        }

        // 隐藏消息
        function hideMessage(element) {
            element.classList.remove('show');
            setTimeout(() => {
                element.classList.add('hidden');
            }, 300);
        }

        // 显示加载状态
        function showLoading() {
            registerButton.disabled = true;
            registerText.style.display = 'none';
            registerIcon.style.display = 'none';
            registerLoader.style.display = 'block';
        }

        // 隐藏加载状态
        function hideLoading() {
            registerButton.disabled = false;
            registerText.style.display = 'inline';
            registerIcon.style.display = 'inline';
            registerLoader.style.display = 'none';
        }

        // 显示验证码按钮加载状态
        function showCodeLoading() {
            sendCodeBtn.disabled = true;
            codeBtnText.style.display = 'none';
            codeLoader.style.display = 'block';
        }

        // 隐藏验证码按钮加载状态
        function hideCodeLoading() {
            sendCodeBtn.disabled = false;
            codeBtnText.style.display = 'inline';
            codeLoader.style.display = 'none';
        }

        // 验证码倒计时
        function startCodeCountdown(seconds = 60) {
            let count = seconds;
            sendCodeBtn.disabled = true;
            codeBtnText.textContent = `${count}s后重发`;

            const countdown = setInterval(() => {
                count--;
                codeBtnText.textContent = `${count}s后重发`;

                if (count <= 0) {
                    clearInterval(countdown);
                    sendCodeBtn.disabled = false;
                    codeBtnText.textContent = '发送验证码';
                }
            }, 1000);
        }

        // 发送验证码
        sendCodeBtn.addEventListener('click', async () => {
            const email = emailInput.value.trim();

            // 验证邮箱
            if (!validateEmail()) {
                showMessage(errorMessage, '请输入有效的邮箱地址');
                emailInput.focus();
                return;
            }

            try {
                // 显示加载状态
                showCodeLoading();

                // 调用发送验证码API
                const response = await fetch('/api/v1/VerificateCode', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        email: email
                    }),
                    credentials: 'include'
                });

                const result = await response.json();

                // 隐藏加载状态
                hideCodeLoading();

                // 处理API响应
                if (response.ok) {
                    // 验证码发送成功
                    showMessage(successMessage, result.message || '验证码已发送，请查收邮件');
                    codeHint.textContent = '验证码已发送至您的邮箱，有效期5分钟';
                    codeHint.classList.add('text-success');

                    // 开始倒计时
                    startCodeCountdown();
                } else {
                    // 验证码发送失败
                    showMessage(errorMessage, result.message || '验证码发送失败，请稍后重试');
                }
            } catch (error) {
                // 隐藏加载状态
                hideCodeLoading();

                // 处理网络错误
                console.error('发送验证码请求失败:', error);
                showMessage(errorMessage, '网络错误，请稍后重试');
            }
        });

        // 验证用户名
        function validateUsername() {
            const username = usernameInput.value.trim()

            if (username === '') {
                usernameValid.classList.add('hidden');
                usernameInvalid.classList.add('hidden');
                usernameHint.textContent = '用户名不能为空';
                usernameHint.classList.remove('text-danger', 'text-success');
                return false;
            }

            if (username.length >= 3 && username.length <= 20) {
                usernameValid.classList.remove('hidden');
                usernameInvalid.classList.add('hidden');
                usernameHint.textContent = '用户名可用';
                usernameHint.classList.remove('text-danger');
                usernameHint.classList.add('text-success');
                return true;
            } else {
                usernameValid.classList.add('hidden');
                usernameInvalid.classList.remove('hidden');
                usernameHint.textContent = '用户名长度必须在3-20个字符之间';
                usernameHint.classList.remove('text-success');
                usernameHint.classList.add('text-danger');
                return false;
            }
        }

        // 验证邮箱
        function validateEmail() {
            const email = emailInput.value.trim();
            // 简单的邮箱验证正则
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (email === '') {
                emailValid.classList.add('hidden');
                emailInvalid.classList.add('hidden');
                return false;
            }

            if (emailRegex.test(email)) {
                emailValid.classList.remove('hidden');
                emailInvalid.classList.add('hidden');
                return true;
            } else {
                emailValid.classList.add('hidden');
                emailInvalid.classList.remove('hidden');
                return false;
            }
        }

        // 评估密码强度
        function evaluatePasswordStrength() {
            const password = passwordInput.value;
            let strength = 0;

            // 重置强度指示器
            strength1.style.backgroundColor = 'bg-gray-200';
            strength2.style.backgroundColor = 'bg-gray-200';
            strength3.style.backgroundColor = 'bg-gray-200';
            strength4.style.backgroundColor = 'bg-gray-200';
            strength1.className = 'password-strength-bar w-1/4 rounded-full bg-gray-200';
            strength2.className = 'password-strength-bar w-1/4 rounded-full bg-gray-200';
            strength3.className = 'password-strength-bar w-1/4 rounded-full bg-gray-200';
            strength4.className = 'password-strength-bar w-1/4 rounded-full bg-gray-200';

            if (password.length === 0) {
                passwordStrengthText.textContent = '密码强度：未输入';
                passwordStrengthText.className = 'text-xs text-gray-500';
                return 0;
            }

            // 长度检查
            if (password.length >= 8) strength++;
            if (password.length >= 12) strength++;

            // 包含字母和数字
            if (/[A-Za-z]/.test(password) && /\d/.test(password)) strength++;

            // 包含特殊字符
            if (/[^A-Za-z0-9]/.test(password)) strength++;

            // 更新强度指示器
            if (strength >= 1) strength1.className = 'password-strength-bar w-1/4 rounded-full bg-danger';
            if (strength >= 2) strength2.className = 'password-strength-bar w-1/4 rounded-full bg-warning';
            if (strength >= 3) strength3.className = 'password-strength-bar w-1/4 rounded-full bg-primary';
            if (strength >= 4) strength4.className = 'password-strength-bar w-1/4 rounded-full bg-success';

            // 更新强度文本
            const strengthTexts = [
                '密码强度：极弱',
                '密码强度：弱',
                '密码强度：中',
                '密码强度：强',
                '密码强度：极强'
            ];

            const strengthColors = [
                'text-danger',
                'text-danger',
                'text-warning',
                'text-primary',
                'text-success'
            ];

            passwordStrengthText.textContent = strengthTexts[strength];
            passwordStrengthText.className = `text-xs ${strengthColors[strength]}`;

            return strength;
        }

        // 验证密码匹配
        function validatePasswordMatch() {
            const password = passwordInput.value;
            const confirmPassword = confirmPasswordInput.value;

            if (confirmPassword === '') {
                passwordMatch.classList.add('hidden');
                passwordMismatch.classList.add('hidden');
                return false;
            }

            if (password === confirmPassword && password !== '') {
                passwordMatch.classList.remove('hidden');
                passwordMismatch.classList.add('hidden');
                return true;
            } else {
                passwordMatch.classList.add('hidden');
                passwordMismatch.classList.remove('hidden');
                return false;
            }
        }

        // 实时验证
        usernameInput.addEventListener('input', validateUsername);
        emailInput.addEventListener('input', validateEmail);
        passwordInput.addEventListener('input', () => {
            evaluatePasswordStrength();
            validatePasswordMatch();
        });
        confirmPasswordInput.addEventListener('input', validatePasswordMatch);

        // 表单提交处理
        registerForm.addEventListener('submit', async (e) => {
            e.preventDefault();

            // 隐藏消息
            hideMessage(successMessage);
            hideMessage(errorMessage);

            // 验证表单
            const isUsernameValid = validateUsername();
            const isEmailValid = validateEmail();
            const passwordStrength = evaluatePasswordStrength();
            const isPasswordMatch = validatePasswordMatch();
            const verificationCode = verificationCodeInput.value.trim();

            // 检查所有验证是否通过
            if (!isUsernameValid) {
                showMessage(errorMessage, '请输入有效的用户名');
                usernameInput.focus();
                return;
            }

            if (!isEmailValid) {
                showMessage(errorMessage, '请输入有效的邮箱地址');
                emailInput.focus();
                return;
            }

            if (!verificationCode || verificationCode.length !== 6) {
                showMessage(errorMessage, '请输入6位验证码');
                verificationCodeInput.focus();
                return;
            }

            if (passwordStrength < 2) {
                showMessage(errorMessage, '密码强度不足，请使用更强的密码');
                passwordInput.focus();
                return;
            }

            if (!isPasswordMatch) {
                showMessage(errorMessage, '两次输入的密码不一致');
                confirmPasswordInput.focus();
                return;
            }

            if (!document.getElementById('terms').checked) {
                showMessage(errorMessage, '请阅读并同意服务条款和隐私政策');
                return;
            }

            try {
                // 显示加载状态
                showLoading();

                // 获取表单数据
                const formData = {
                    username: usernameInput.value.trim(),
                    email: emailInput.value.trim(),
                    verificationCode: verificationCode,
                    password: passwordInput.value
                };

                // 调用注册API
                const response = await fetch('/api/v1/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData),
                    credentials: 'include'
                });

                const result = await response.json();

                // 隐藏加载状态
                hideLoading();

                // 处理API响应
                if (response.ok) {
                    // 注册成功
                    showMessage(successMessage, result.message || '注册成功，即将跳转到登录页面...');

                    // 3秒后跳转到登录页面
                    setTimeout(() => {
                        window.location.href = '/login';
                    }, 3000);
                } else {
                    // 注册失败
                    showMessage(errorMessage, result.message || '注册失败，请稍后重试');
                }
            } catch (error) {
                // 隐藏加载状态
                hideLoading();

                // 处理网络错误
                console.error('注册请求失败:', error);
                showMessage(errorMessage, '网络错误，请稍后重试');
            }
        });

        // 添加输入框动画效果
        const inputs = document.querySelectorAll('input');
        inputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.parentElement.classList.add('scale-[1.01]');
                input.parentElement.style.transition = 'transform 0.2s ease';
            });

            input.addEventListener('blur', () => {
                input.parentElement.classList.remove('scale-[1.01]');
            });

            // 输入时隐藏错误信息
            input.addEventListener('input', () => {
                hideMessage(errorMessage);
            });
        });
    </script>
</body>
</html>
